<template>
  <div id="app">
    <audio ref="music" :src="data.url" autoplay></audio>

    <div class="ll">
      <div class="m-box" ref="musicImg" @click="btnM">
        <img :src="img1v1Url" alt="" />
      </div>
    </div>
    <div class="lr">
      <h2>热门留言</h2>
      <div v-for="(item, index) in hot" :key="index">
        <!-- 用户头像 -->
        <div>
          <img :src="item.user.avatarUrl" />
        </div>
        <!-- 用户昵称 -->
        <div>{{ item.user.nickname | getName }}</div>
        <!-- 用户评论 -->
        <div>{{ item.content }}</div>
        <!-- 用户评论时间 -->
        <div>{{ item.time | dataFormat }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { playM, hot } from '@/api/music.js'
import local from '@/utils/local.js'
export default {
  data() {
    return {
      data: {},
      flag: false,
      img1v1Url: '',
      hot: []
    }
  },
  methods: {
    async getM(id) {
      const { data } = await playM({ id })
      this.data = data[0]
    },
    async getHot(id) {
      const { hotComments } = await hot({
        type: 0,
        id
      })
      this.hot = hotComments
      console.log(hotComments)
    },
    btnM() {
      if (this.flag) {
        this.$refs.music.play()
        this.$refs.musicImg.style = `animation-play-state: running;`
      } else {
        this.$refs.music.pause()
        this.$refs.musicImg.style = `animation-play-state: paused;`
      }
      this.flag = !this.flag
    }
  },
  filters: {
    getName(name) {
      return name + ':'
    }
  },
  created() {
    this.getM(this.$route.params.id - 0)
    this.$nextTick(() => {
      this.img1v1Url = local.getItem(this.$route.params.id)
    })
    this.getHot(this.$route.params.id - 0)
  }
}
</script>

<style scoped>
@keyframes myfrist {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
#app {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.ll {
  flex: 1;
}
.lr {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.m-box {
  flex: 1;
  text-align: center;
  line-height: 400px;
  margin: 50px auto;
  width: 400px;
  border-radius: 50%;
  height: 400px;
  background-color: rgb(171, 171, 171);
  animation: myfrist 10s infinite linear running;
}
img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
h2 {
  margin-top: 20px;
  font-weight: bold;
}
.lr > div {
  margin-top: 30px;
  display: flex;
}
.lr > div div:nth-of-type(1) {
  width: 50px;
  height: 50px;
}
.lr > div div:nth-of-type(2) {
  width: 100px;
  color: rgb(119, 137, 218);
}
.lr > div div:nth-of-type(3) {
  flex: 1;
}
.lr > div div:nth-of-type(4) {
  width: 180px;
  color: rgb(173, 166, 166);
}
img {
  width: 100%;
  height: 100%;
}
</style>
